import 'package:flutter/material.dart';

/// 默认显示SearchBar, 当点击SearchBar时, 弹出SearchPage
class SearchBar extends StatelessWidget {
  	SearchBar({Key key}) : super(key: key);

	  @override
	Widget build(BuildContext context) {
		return Container(
			// color: Colors.white,
			decoration: new BoxDecoration(
				//设置边界
				border: new Border.all(
					color: Colors.white,
					width: 1.0,
				),
				//设置边界半径
				borderRadius: new BorderRadius.all(new Radius.circular(8.0)),
			),
			margin: EdgeInsets.all(8.0),   // 设置外边距
			padding: EdgeInsets.all(4.0), // 设置内边距
			alignment: Alignment.topCenter,  // 顶部居中
			child: GestureDetector(  // 可以监听点击事件的Widget
				child: Hero(
					tag: 'imageHero',
					child: Row(
						mainAxisAlignment: MainAxisAlignment.center,
						children: <Widget>[
							Icon(Icons.search),
							Text('search'),
						],
					),
				),
				onTap: () { // 点击SearchBar时, 弹出SearchPage
					Navigator.push(context, MaterialPageRoute(builder: (context) => SearchPage()));
				},
			)
		);
	}
  	// _SearchBarState createState() => _SearchBarState();
}

class SearchPage extends StatefulWidget {

	SearchPage({Key key}) : super(key: key);

	_SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> with SingleTickerProviderStateMixin {

	// 搜索框编辑时的控制器
	TextEditingController _editingController;
	// 搜索的文本
	String _searchText;

	@override
	void initState() {
		_editingController = new TextEditingController();
		// 对输入框添加监听事件
		_editingController.addListener(_changeDisplay);
		super.initState();
	}

	@override
	void dispose() {
		_editingController.dispose();
		super.dispose();
	}

	_changeDisplay() {  // 搜索框变化时响应的函数
		// print(_editingController.text);
		setState(() { // 调用setState() 函数, Flutter会重绘界面, 实时显示用户输入的内容
			_searchText = _editingController.text;
		});
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			backgroundColor: Colors.grey,
			appBar: AppBar(
				backgroundColor: Colors.white54,    // 导航栏的背景颜色
				automaticallyImplyLeading: false,   // false表示不要默认的返回按钮
				title: TextField(                  // 导航栏中的搜索输入框
					autofocus: true,
					controller: _editingController,
					decoration: InputDecoration(
						border: InputBorder.none,   // 隐藏输入框的边框
						prefixIcon: Icon(           // 输入框的前置Icon
							Icons.search,
							color: Colors.grey,
						),
						hintText: 'Search',        // placeholder文字
						hintStyle: TextStyle(      // placeholder文字的颜色
							color: Colors.grey
						)
					),
					onChanged: (text) {			  // 监听输入框的变化事件, 这里使用TextEditingController实现
					},
				),
				actions: <Widget>[        // 导航栏右边的按钮
					FlatButton(
						child: Text(
							'Cancel',
							style: TextStyle(  // 文字的样式
								color: Colors.green
							),
						),
						onPressed: () {    // 按钮点击事件, 返回上一层Widget
							Navigator.pop(context);
						},
					)
				],
			),
			body: Center(  // 搜索界面的body
				child: Text('$_searchText'),
			),
		);
	}
}